<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            margin: 0 auto;
        }
        .top{
            position: fixed;
            bottom: 0;
            left: 50%;
            margin-left: 310px;
            width: 50px;
            height: 50px;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: orange;
            color: #fff;
        }
        ul.box{
            padding: 1rem;
            box-sizing: border-box;
            background-color: orange;
            display: flex;
            width: 100%;
        }
        .box.h{
            height: 240px;
        }
        .box.auto > li{
            height: auto;
        }
        .box > li{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            list-style: none;
            border: solid 2px orange;
        }
    </style>
</head>
<body>
    <a name="top"></a>
    <div class="container">
        <h5>属性</h5>
        <ol>
            <li><a href="#flex-direction">flex-direction</a></li>
            <li><a href="#flex-wrap">flex-wrap</a></li>
            <li><a href="#flex-flow">flex-flow</a></li>
            <li><a href="#justify-content">justify-content</a></li>
            <li><a href="#align-items">align-items</a></li>
            <li><a href="#align-content">align-content</a></li>
        </ol>

        <h5>单项属性</h5>
        <ol>
            <li><a href="#order">order</a></li>
            <li><a href="#flex-grow">flex-grow</a></li>
            <li><a href="#flex-shrink">flex-shrink</a></li>
            <li><a href="#flex-basis">flex-basis</a></li>
            <li><a href="#flex">flex</a></li>
            <li><a href="#align-self">align-self</a></li>
        </ol>

        <hr>
        <a name="flex-direction"></a>
        <h1># flex-direction</h1>
        <h2>flex-direction: row</h2>
        <ul class="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <h2>flex-direction:row-reverse</h2>
        <ul class="box" style="flex-direction:row-reverse;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <h2>flex-direction:column</h2>
        <ul class="box" style="flex-direction:column;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>flex-direction:column-reverse</h2>
        <ul class="box" style="flex-direction:column-reverse;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        
        <hr>
        <a name="flex-wrap"></a>
        <h1># flex-wrap</h1>
        <h2>flex-wrap:nowrap</h2>
        <ul class="box" style="flex-wrap:nowrap;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>flex-wrap:wrap</h2>
        <ul class="box" style="flex-wrap:wrap;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>flex-wrap:wrap-reverse</h2>
        <ul class="box" style="flex-wrap:wrap-reverse;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>

        <hr>
        <a name="flex-flow"></a>
        <h1># flex-flow</h1>
        <h2>flex-flow: row-reverse wrap</h2>
        <ul class="box" style="flex-flow: row-reverse wrap;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>


        <hr>
        <a name="justify-content"></a>
        <h1># justify-content</h1>
        <h2>justify-content:flex-start</h2>
        <ul class="box" style="justify-content:flex-start;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>justify-content:flex-end</h2>
        <ul class="box" style="justify-content:flex-end;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>justify-content:center</h2>
        <ul class="box" style="justify-content:center;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>justify-content:space-around</h2>
        <ul class="box" style="justify-content:space-around;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>justify-content:space-between</h2>
        <ul class="box" style="justify-content:space-between;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>


        <hr>
        <a name="align-items"></a>
        <h1># align-items</h1>
        <h2>align-items:flex-start</h2>
        <ul class="box h" style="align-items:flex-start;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h2>align-items:flex-end</h2>
        <ul class="box h" style="align-items:flex-end;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h2>align-items:center</h2>
        <ul class="box h" style="align-items:center;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h2>align-items:baseline</h2>
        <ul class="box h" style="align-items:baseline;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li style="font-size: 56px;">4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h2>align-items:stretch</h2>
        <p>项的高度为: auto</p>
        <ul class="box h auto" style="align-items:stretch;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>

        
        <hr>
        <a name="align-content"></a>
        <h1># align-content</h1>
        <h2>align-content:flex-start</h2>
        <ul class="box h" style="flex-wrap: wrap; align-content:flex-start;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>align-content:flex-end</h2>
        <ul class="box h" style="flex-wrap: wrap; align-content:flex-end;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>align-content:center</h2>
        <ul class="box h" style="flex-wrap: wrap; align-content:center;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>align-content:space-around</h2>
        <ul class="box h" style="flex-wrap: wrap; align-content:space-around;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>align-content:space-between</h2>
        <ul class="box h" style="flex-wrap: wrap; align-content:space-between;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
        <h2>align-content:stretch</h2>
        <p>项的高度为:auto</p>
        <ul class="box h auto" style="flex-wrap: wrap; align-content:stretch;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>


        <hr>
        <a name="order"></a>
        <h1># order</h1>
        <h2>order: -1</h2>
        <ul class="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li style="order:-1">4</li>
        </ul>

        <hr>
        <a name="flex-grow"></a>
        <h1># flex-grow</h1>
        <p>flex-grow的值分别为: 20,40,20,20</p>
        <ul class="box">
            <li style="flex-grow:20">1</li>
            <li style="flex-grow:40">2</li>
            <li style="flex-grow:20">3</li>
            <li style="flex-grow:20">4</li>
        </ul>


        <hr>
        <a name="flex-shrink"></a>
        <h1># flex-shrink</h1>
        <p>flex-shrink为：0</p>
        <ul class="box">
            <li style="flex-shrink:0">1</li>
            <li style="flex-shrink:0">2</li>
            <li style="flex-shrink:0">3</li>
            <li style="flex-shrink:0">4</li>
        </ul>

        <hr>
        <a name="flex-basis"></a>
        <h1># flex-basis</h1>


        <hr>
        <a name="flex"></a>
        <h1># flex</h1>


        <hr>
        <a name="align-self"></a>
        <h1># align-self</h1>
        <ul class="box h">
            <li>1</li>
            <li>2</li>
            <li style="align-self:flex-start">3</li>
            <li style="align-self:flex-end">4</li>
            <li style="align-self:center">5</li>
            <li style="align-self:stretch; height:auto;">6</li>
            <li style="align-self:baseline; font-size:56px;">7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>

    </div>
    <a href="#top" class="top">TOP</a>
</body>
</html>